var vm = new Vue({
	el: "#example",
	data: {
		message: "hello world!!"
	},
	computed: {
		reverseMessage: function() {
			return this.message.split('').reverse().join('');
		}
	}

})

var vm2 = new Vue({
	el: "#demo",
	data: {
		firstName: "Beibei",
		lastName: "Ding",
	},
	computed: {
		fullname: {
			get: function() {
				return this.firstName + " " + this.lastName;
			},
			set: function(newValue) {
				var names = newValue.split(' ');
				this.firstName = names[0];
				this.lastName = names[1];
			}
		}
	}
})

var vm3 = new Vue({
	el: "#watch-example",
	data: {
		question: "",
		answer: "I can not give you any response if you asked none!",
		imgSrc: ""
	},
	created: function() {
		// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
		// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
		// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
		// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
		// 请参考：https://lodash.com/docs#debounce
		this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
	},
	watch: {
		question: function(newValue, oldValue) {
			this.answer = "Waiting for you to stop typing...";
			this.debouncedGetAnswer();
		}
	},
	methods: {
		getAnswer: function() {
			if (this.question.indexOf('?') === -1) {
				this.answer = 'Questions usually contain a question mark. ;-)'
				return
			}
			this.answer = "Thinking...";
			var thisVm = this;
			axios.get('https://yesno.wtf/api')
				.then(function(response) {
					thisVm.answer = _.capitalize(response.data.answer);
					thisVm.imgSrc = _.capitalize(response.data.image);
				})
				.catch(function(error) {
					thisVm.answer = 'Error! Could not reach the API. ' + error;
				})
		}
	}
})

var classVm = new Vue({
	el: "#class-demo",
	data: {
		isActive: true,
		error: null
	},
	computed: {
		classObject: function() {
			return {
				active: this.isActive && !this.error,
				'text-danger': this.error && this.error.type === 'fatal'
			}
		}
	}
})

var ifVm = new Vue({
	el: "#if-demo",
	data: {
		loginType: "username"
	},
	methods: {
		changeType:function(){
			if(this.loginType == "username"){
				this.loginType = "";
			}else{
				this.loginType = "username";
			}
		}
	}
})

var forVm = new Vue({
	el: "#for-demo",
	data: {
		parentMessage: "parent",
		items: [
			{ message: "FOO"},
			{ message: "BAR"},
			{ message: "KEY"}
		]
	}
})

var forVm2 = new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

var formVm = new Vue({
	el: "#form-demo",
	data: {
		message: ''
	}
})

var checkVm = new Vue({
	el: "#checkbox-demo",
	data: {
		checked: false
	}
})

var checkVm2 = new Vue({
	el: "#checkbox-demo2",
	data: {
		checkednames: []
	}
})


var componentVm = new Vue({
	el: "#demo1"
})
